<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 300px;
            height: 100px;
            background: red;
            border: 10px solid black;
        }

        .rect {
            stroke-dasharray: 0 126;
            transform-origin: 25px 25px;
            transition: stroke-dasharray .3s linear;
            transform: rotate(-90deg);
        }

        @keyframes rotate {
            from {
                /* transform: rotate(0deg); */
                stroke-dasharray: 0 126;
            }

            to {
                /* transform: rotate(360deg); */
                stroke-dasharray: 126 0;
            }
        }

        .heart {
            stroke-dasharray: 3500;
            stroke-dashoffset: 3500;
            animation: r 2s linear infinite;
            fill: white;
            /* stroke-dasharray: 1024;
            stroke-dashoffset: 200; */
        }

        @keyframes r {
            0% {
                stroke-dashoffset: 3500;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <canvas id="tutorial" width="300" height="100"></canvas>
    </div>
    <div>
        <svg width="300" height="300">
            <defs>
                <linearGradient id="test-color">
                    <stop stop-color="red" offset="0%" stop-opacity="1"></stop>
                    <stop stop-color="green" offset="50%"></stop>
                    <stop stop-color="blue" offset="100%" stop-opacity="0.5"></stop>
                </linearGradient>
                <radialGradient id="test-radial-color" cx="50%" cy="50%" fx="20%" fy="80%" r="80%">
                    <stop stop-color="white" offset="0%" stop-opacity="1"></stop>
                    <stop stop-color="red" offset="30%" stop-opacity="1"></stop>
                    <stop stop-color="blue" offset="100%" stop-opacity="0.5"></stop>
                </radialGradient>
            </defs>
            <rect x="0" y="0" width="300" height="300" stroke="red" fill="url(#test-radial-color)"></rect>
        </svg>
    </div>
    <div style="background:#333;height: 500px;width:800px;">
        <svg width="800px" height="100%" viewBox="0 0 300 300">
            <defs>
                <path id="test-path" d="M5 5 L290 5 L290 290 L5 290 Z" fill="none"></path>
                <radialGradient id="test-r-color" fx="100%" fy="50%" cx="50%" cy="50%" r="50%">
                    <stop stop-color="white" offset="0" stop-opacity="1"></stop>
                    <stop stop-color="white" offset="100%" stop-opacity="0"></stop>
                </radialGradient>
                <mask id="test-mask">
                    <circle cx="0" cy="0" r="50" fill="url(#test-r-color)">
                        <animateMotion path="M5 5 L290 5 L290 290 L5 290 Z" rotate="auto" repeatCount="indefinite"
                            dur="3s">
                        </animateMotion>
                    </circle>
                </mask>
            </defs>
            <use href="#test-path" stroke="#235fa7" stroke-width="1" />
            <use href="#test-path" stroke="#4fd2dd" stroke-width="3" mask="url(#test-mask)" />
        </svg>
    </div>
    <div>
        <svg width="300" height="300" viewbox="0 0 300 300">
            <defs>
                <masK id="test-mask">
                    <rect x="0" y="0" width="300" height="300" fill="green"></rect>
                    <circle cx="100" cy="100" r="50"></circle>
                </masK>
                <linearGradient id="test-color">
                    <stop stop-color="red" offset="100%">
                    </stop>
                </linearGradient>
            </defs>
            <rect x="0" y="0" width="300" height="300" fill="red"></rect>
            <rect mask="url(#test-mask)" x="0" y="0" width="300" height="300" fill="blue"></rect>
        </svg>
    </div>
    <!-- 半圆 -->
    <div>
        <svg width="300" height="300" viewbox="0 0 280 280">
            <circle id="test" cx="110" cy="110" r="100" stroke="#3be6cb" stroke-width="15" fill="none"
                stroke-dasharray="157" stroke-linecap="round">
                <animateTransform attributeName="transform" begin="0" attributeType="XML" type="rotate"
                    values="0 110 110;360 110 110" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
                <animate dur="4" attributeName="stroke" attributeType="XML" values="#3be6cb;#02bcfe;#3be6cb"
                    repeatCount="indefinite"></animate>
            </circle>
            <circle cx="110" cy="110" r="70" stroke="#02bcfe" stroke-width="15" fill="none" stroke-dasharray="110"
                stroke-linecap="round">
                <animateTransform attributeName="transform" begin="0" attributeType="XML" type="rotate"
                    values="360 110 110;0 110 110" dur="2s" fill="freeze" repeatCount="indefinite">
                </animateTransform>
                <animate dur="4" attributeName="stroke" attributeType="XML" values="#02bcfe;#3be6cb;#02bcfe"
                    repeatCount="indefinite"></animate>
            </circle>
        </svg>
    </div>
    <svg width="200" height="200" viewbox="0 0 230 230">
        <rect x="0" y="0" width="10" height="10" fill="green">
            <animateMotion dur="3s" path="M10 10 L200 10 L200 200 L10 200" rotate="0" repeatCount="indefinite">
            </animateMotion>
        </rect>
        <path d="M10 10 L200 10 L200 200 L10 200" fill="none" stroke="red" stroke-width="2"></path>
    </svg>
    <svg width="200" height="200" viewbox="0 0 230 230">
        <rect x="0" y="0" width="10" height="10" fill="green">
            <animateMotion id="forward" dur="3s" path="M10 10 L200 10 L200 200 L10 200" fill="freeze"
                begin="0;backward.end">
            </animateMotion>
            <animateMotion id="backward" dur="2s" path="M10 200 L200 200 L200 10 L10 10" fill="freeze"
                begin="forward.end">
            </animateMotion>
            <animate id="greentoblue" attributeName="fill" attributeType="XML" dur="3s" from="green" to="red"
                fill="freeze" begin="0;bluetogreen.end"></animate>
            <animate id="bluetogreen" attributeName="fill" attributeType="XML" dur="2s" from="red" to="green"
                begin="greentoblue.end"></animate>
        </rect>
        <path d="M10 10 L200 10 L200 200 L10 200" fill="none" stroke="red" stroke-width="2"></path>
    </svg>
    <svg width="200" height="200" viewbox="0 0 230 230">
        <rect x="0" y="0" width="10" height="10" fill="green">
            <animateMotion dur="3s" path="M10 10 L200 10 L200 200 L10 200 Z" rotate="0" repeatCount="indefinite">
            </animateMotion>
        </rect>
        <path d="M10 10 L200 10 L200 200 L10 200 Z" fill="none" stroke="red" stroke-width="2"></path>
    </svg>
    <svg width="1000" height="100%" viewbox="0 0 1000 300">
        <polygon points="10 10 100 100 100 200 200 300 500 30" stroke="red" stroke-width="3" fill="none">
            <animate attributeName="points" dur="3s" repeatCount="indefinite" attributeType="XML"
                to="10 10 200 100 200 200 300 300 500 100" fill="freeze"></animate>
            <animate attributeName="fill" dur="3s" repeatCount="indefinite" attributeType="XML" from="blue" to="red"
                fill="forwards"></animate>
            <animateTransform attributeName="transform" attributeType="XML" begin="0" dur="3s" type="scale" from="1"
                to="1.5" repeatCount="indefinite"></animateTransform>
        </polygon>
        <!-- <rect class="heart" x="10" y="60" width="800" height="200" stroke="red" stroke-width="10" fill="none"></rect> -->
        <!-- <line x1="0" y1="50" x2="1000" y2="50" stroke="red" stroke-width="50">
            <set attributeName="x1" attributeType="XML" from="0" to="100" dur="2s" repeatCount="5" fill="freeze"></set>
        </line> -->
    </svg>
    <div>
        <svg viewBox="0 0 1024 1024" width="200" height="200">
            <path class="heart" fill="none" stroke="red" stroke-width="3"
                d="M171.712 571.648l0.352 0.32 287.904 252.8a64 64 0 0 0 82.912 1.344l296.832-244.544a215.584 215.584 0 1 0-301.824-300.576L512 316.672l-25.888-35.616a215.584 215.584 0 1 0-314.4 290.624zM32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512l-295.36 243.392a128 128 0 0 1-165.888-2.592L129.984 620.16A278.976 278.976 0 0 1 32 407.584z">
            </path>
        </svg>
    </div>
    <div style="width:350px;height:350px;">
        <svg id="aaa" width="100%" height="100%" viewBox="0 0 100 100">
            <circle cx="25" cy="25" width="100" height="100" stroke="#eee" stroke-width="5" r="20" fill="none" />
            <circle id="progress" class="rect" cx="25" cy="25" width="100" height="100" stroke="green" stroke-width="5"
                r="20" fill="none" />
            <text id="ptext" x="25" y="25" text-anchor="middle" dominant-baseline="middle" font-size="8px">
                0%
            </text>
        </svg>
    </div>
    <svg width="100%" height="100%">
        <rect width="50" height="50" style="fill:red;stroke:black;stroke-width:10px;"> </rect>
        <line x1="60" y1="60" x2="80" y2="80" style="stroke: blue;stroke-width:20px;"></line>
        <line x1="80" y1="80" x2="100" y2="100" style="stroke:yellow;stroke-width:15px;"></line>
        <circle cx="200" cy="200" r="50" file="rebex" style="fill: rebeccapurple;stroke:green;stroke-width:10px;" />
    </svg>
    <script>
        var canvas = document.getElementById('tutorial');
        var c = canvas.getContext('2d');

        c.lineWidth = 10;
        c.strokeStyle = 'red';
        c.fillStyle = 'gray';
        c.fillRect(0, 0, 300, 100);


        canvas.onmousemove = (e) => {
            c.beginPath();
            c.fillStyle = 'transparent';
            c.arc(e.clientX, e.clientY, 5, 0, 2 * Math.PI);
            c.stroke();
        }

        const progress = document.all.progress;
        let percent = 0;

        const timer = setInterval(() => {
            percent += Math.random() * 10;
            percent = Math.min(100, percent);
            progress.style.strokeDasharray = `${126 * (percent / 100)} 126`;
            document.all.ptext.innerHTML = percent.toFixed(0) + '%';
            if (percent >= 100) {
                clearInterval(timer);
            }
        }, 1000);

        // ctx.beginPath();
        // // ctx.moveTo(10, 10);
        // ctx.lineTo(20, 20);
        // ctx.lineTo(20, 100);
        // ctx.lineTo(100, 100);
        // ctx.closePath();
        // ctx.stroke();
        // ctx.fillStyle = "rgb(200,0,0)";
        // ctx.fillRect(10, 10, 55, 50);

        // ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        // ctx.fillRect(30, 30, 55, 50);
    </script>
</body>

</html>